<template>
    <div class="collection">
        <div class="header">
            <h2>项目收款</h2>
            <div class="right">
                <span>项目总金额：{{ CollectionList.project_total }}</span>
                <span>已收款：{{ CollectionList.project_payee }}</span>
                <span>待收款：{{ CollectionList.project_unpaid }}</span>
                <el-button type="primary" @click="openAddPayee">添加</el-button>
            </div>
        </div>
        <div>
            <el-table :data="CollectionList.payee" style="width: 100%">
                <el-table-column prop="date" label="时间" width="180">
                </el-table-column>
                <el-table-column prop="location" label="地点" width="180">
                </el-table-column>
                <el-table-column prop="person" label="人物">
                </el-table-column>
                <el-table-column prop="description" label="描述">
                </el-table-column>
                <el-table-column prop="money" label="金额">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="OpenmodifyCollection(scope.row)">修改
                        </el-button>
                        <el-button type="danger" @click="deleteCollection(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="修改项目收款" :visible="modifyPayeeVisible" :show-close="false" width="30%">
            <el-form label-width="80px" :model="modifyPayeeFrom" :rules="rules" ref="modifyPayeeFrom">
                <el-form-item label="地点" prop="location">
                    <el-input v-model="modifyPayeeFrom.location"></el-input>
                </el-form-item>
                <el-form-item label="时间" prop="date">
                    <el-date-picker v-model="modifyPayeeFrom.date" align="right" type="date" placeholder="选择日期"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="人物" prop="person">
                    <el-input v-model="modifyPayeeFrom.person"></el-input>
                </el-form-item>
                <el-form-item label="金额" prop="money">
                    <el-input v-model="modifyPayeeFrom.money"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="modifyPayeeFrom.description"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="modifyPayeeVisible = false">取 消</el-button>
                <el-button type="primary" @click="modifyPayee('modifyPayeeFrom')">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="添加项目收款" :visible="addPayeeVisible" :show-close="false" width="30%">
            <el-form label-width="80px" :model="addPayeeFrom" ref="addPayeeFrom" :rules="rules">
                <el-form-item label="地点" prop="location">
                    <el-input v-model="addPayeeFrom.location"></el-input>
                </el-form-item>
                <el-form-item label="时间" prop="date">
                    <el-date-picker v-model="addPayeeFrom.date" align="right" type="date" placeholder="选择日期"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="人物" prop="person">
                    <el-input v-model="addPayeeFrom.person"></el-input>
                </el-form-item>
                <el-form-item label="金额" prop="money">
                    <el-input v-model="addPayeeFrom.money"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="addPayeeFrom.description"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addPayeeVisible = false">取 消</el-button>
                <el-button type="primary" @click="addPayee('addPayeeFrom')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props: ['projectInfo'],
    data() {
        return {
            project_id: '',
            addPayeeVisible: false,
            modifyPayeeVisible: false,
            CollectionList: {},
            addPayeeFrom: {
                project_id: ''
            },
            modifyPayeeFrom: {
            },
            rules: {
                date: [
                    { required: true, message: '请选择时间', trigger: 'change' }
                ],
                location: [
                    { required: true, message: '请输入地址', trigger: 'change' }
                ],
                person: [
                    { required: true, message: '请选择人物', trigger: 'change' }
                ],
                money: [
                    { required: true, message: '请选择金额', trigger: 'change' }
                ],
                description: [
                    { required: true, message: '请选择描述', trigger: 'change' }
                ],
            }
        }
    },
    methods: {
        // 获取列表
        getCollectionList(id) {
            this.$http.get(`/admin/auth/getPayee?project_id=${id}`).then(res => {
                if (res.data.status == 200) {
                    this.CollectionList = res.data.data
                } else {
                    this.$message({
                        type: "error",
                        message: res.data.message
                    })
                }
            })
        },
        // 打开添加编辑框
        openAddPayee() {
            this.addPayeeVisible = true
        },
        // 请求添加
        addPayee(addPayee) {
            this.$refs[addPayee].validate((valid) => {
                if (valid) {
                    this.$http.post('/admin/auth/addPayee', this.addPayeeFrom).then(res => {
                        if (res.data.status == 200) {
                            this.$message({
                                type: 'success',
                                message: res.data.message
                            })
                            this.getCollectionList(this.project_id)
                            this.addPayeeVisible = false
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.message
                            })
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })

        },
        // 打开修改收款
        OpenmodifyCollection(data) {
            this.modifyPayeeFrom = data
            this.modifyPayeeVisible = true
        },
        // 修改收款
        modifyPayee(modifyPayee) {
            this.$refs[modifyPayee].validate((valid) => {
                if (valid) {
                    this.$http.post('/admin/auth/updatePayee', this.modifyPayeeFrom).then(res => {
                        if (res.data.status == 200) {
                            this.$message({
                                type: 'success',
                                message: res.data.message
                            })
                            this.getCollectionList(this.project_id)
                            this.modifyPayeeVisible = false
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.message
                            })
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        // 删除收款记录
        deleteCollection(e) {
            console.log(e.id)
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.delete(`/admin/auth/deletePayee?${e.id}`).then(res => {
                    console.log(res)
                    if (res.data.status == 200) {
                        this.$message({
                            type: 'success',
                            message: res.data.message
                        })
                        this.getCollectionList(this.project_id)
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.message
                        })
                    }
                })
                //   this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                //   });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    created() {
        // 发请求
        this.getCollectionList(this.projectInfo.id)
        this.project_id = this.projectInfo.id
        this.addPayeeFrom.project_id = this.projectInfo.id
    }
}
</script>
<style scoped lang="less">
.collection {
    box-sizing: border-box;
    position: absolute;
    left: 200px;
    top: 0;
    display: inline-block;
    width: 900px;
    padding: 20px;
    height: 90vh;
}

.header {
    h2 {
        text-align: center;
        font-size: 50px;
    }

    .right {
        margin-top: 50px;
        margin-left: 500px;

        span {
            margin-right: 50px;
        }
    }
}
</style>